<template>
  <div class='artices-class' v-infinite-scroll="load" infinite-scroll-delay="700">
    <div class="uplist">
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          {{uplistnameRef}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="item in uplistnamelistRef" :key="item.id" @click="dropdown(item.value,item.name)">
              {{ item.name }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="artices-class-all" v-for="item in articeslistRef" :key="item.id" @click="routerpath(item.userId, item.id)">
      <div class="left">
        <div class="title">{{ item.title }}</div>
        <div class="content"> {{ item.content }} </div>
        <div class="ioc-div">
          <ul>
            <li class="l1">
              <img :src="item.user.avatar" alt="" class="lilteimg">
              <span>{{ item.user.nickname }}</span>
            </li>
            <li>
              文章类型
            </li>
            <li>
              <i class="iconfont icon-browse"></i>
              <span> {{ item.views }} </span>
            </li>
            <li>
              <i class="iconfont icon-comment"></i>
              <span class="span"> {{ item.commentCount }} </span>
            </li>
            <li>
              <i class="iconfont icon-dianzan"></i>
              <span class="span"> {{ item.likeCount }} </span>
            </li>
          </ul>
        </div>
      </div>
      <div class="right">
        <img src="../../assets/logo.png" alt="">
      </div>
    </div>
    <div>
      <loading size="mini" v-show="showloadingRef"></loading>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getByTypeAndOrderAPI } from '../../api/artice'
import loading from '../../components/Loading/index.vue'

export default defineComponent({
  name: '',
  components: {
    loading
  },
  props: {
    uplistvalueRef: {
      type: String
    }
  },
  setup (props: any) {
    // 排序名称
    const uplistnameRef = ref<string>('默认排序')
    const uplistvalueRef = ref<string>('')
    const uplistnamelistRef = ref<Array<any>>([
      {
        id: 0,
        name: '默认排序',
        value: ''
      },
      {
        id: 1,
        name: '按照浏览量排序',
        value: 'views'
      },
      {
        id: 3,
        name: '按时间排序',
        value: 'create_time'
      }
    ])
    
    const showloadingRef = ref<boolean>(true)
    const route = useRoute()
    // 文章数组
    const articeslistRef = ref<Array<any>>([])
    // 页码
    const page = ref<number>(1)
    const dropdown = (value: string, name: string) => {
      uplistvalueRef.value = value
      uplistnameRef.value = name
      articeslistRef.value = []
      getartices(1)
    }
    // 请求方法
    const getartices = async (qian: number) => {
      showloadingRef.value = true
      const res = await getByTypeAndOrderAPI({
        typeId: route.query.typeID,
        order: uplistvalueRef.value,
        page: qian
      })
      articeslistRef.value.push(...res.data.data)
      console.log(16516);
      
      if(res.data.code === 200) {
        showloadingRef.value = false
      }
    }    
    watch(() => uplistvalueRef.value, () => {
      getartices(page.value)
    })
    const load = async () => {
      page.value++
      getartices(page.value)
    }
    const router = useRouter()
    const routerpath = (userID: number, aritcesId: number) => {
      let { href } = router.resolve({
        name: 'aritces',
        query: {
          userID,
          aritcesId
        }
      })
      window.open(href, '_blank')
    }

    onMounted(() => {
      showloadingRef.value = true
      getartices(page.value)
    })
    return {
      articeslistRef,
      uplistnameRef,
      uplistnamelistRef,
      dropdown,
      uplistvalueRef,
      load,
      showloadingRef,
      routerpath
    }
  }
})
</script>

<style lang='scss' scoped>
.artices-class{
  width: 800px;
}
.artices-class-all{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f3f3f3;
  padding: 10px 0;
  cursor: pointer;
  .right{
    img{
      width: 117px;
      height: 88px;
    }
  }
}
.ioc-div{
  margin-top: 20px;
  height: 40px;
  ul{
    color: #99a2aa;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    .l1{
      display: flex;
      align-items: center;
      
    }
    li{
      margin-right: 15px;
    }
  }
}
.lilteimg{
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.title{
  font-size: 20px;
  color: #212121;
  height: 26.5px;
  transition: .3s;
  display: inline-block;
  vertical-align: top;
  -webkit-box-orient: vertical;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.title:hover{
  color: skyblue;
}
.content{
  width: 600px;
  height: 21px;
  margin-top: 4px;
  font-size: 12px;
  color: #99a2aa;
  letter-spacing: 0;
  line-height: 22px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.uplist{
  margin: 15px 0;
}
</style>
